<template>
  <div>
    <view-box>
      <x-header slot="header" :left-options="{showBack: true,preventGoBack:true}" @on-click-back="goBack"
                theme="" class="queryHeader">保险方案
      </x-header>
      <div>
        <group label-width="8em">
          <cell title="是否共保">
            <i slot="icon" class="iconfont icon-tishi" style="color:#4A90E2;padding-right: 5px;"></i>
            <div>
              <span>{{currentData.coinsuranceFlag ? "是" : "否"}}</span>
            </div>
          </cell>
          <cell title="共保公司">
            <i slot="icon" class="iconfont icon-homepage_fill" style="color:#ff9900;padding-right: 5px;"></i>
            <div>
              <span>{{currentData.coinsuranceCompany ? currentData.coinsuranceCompany : "暂无"}}</span>
            </div>
          </cell>
          <cell title="我司承担份额(%)">
            <i slot="icon" class="iconfont icon-homepage_fill" style="color:#4A90E2;padding-right: 5px;"></i>
            <div>
              <span>{{currentData.ownShare ? currentData.ownShare + "%" : "暂无"}}</span>
            </div>
          </cell>
        </group>
        <div style="padding:0 15px">
          <button-tab v-model="promotionIndex" v-if="insuredPlan.length > 0" style="margin-top:0.77em">
            <button-tab-item :selected="index === 0?true:false" @on-item-click="getIndex"
                             v-for="(item ,index) in insuredPlan" :key="index">{{item}}
            </button-tab-item>
          </button-tab>
        </div>
        <div v-if="currentScheme">
          <group label-width="8em">
            <cell title="保险对象">
              <i slot="icon" class="iconfont icon-caifub" style="color:#4A90E2;padding-right: 5px;"></i>
              <div>
                <span>{{currentScheme.insuredTarget}}</span>
              </div>
            </cell>
            <cell title="对象名称">
              <i slot="icon" class="iconfont icon-barrage_fill" style="color:#ff9900;padding-right: 5px;"></i>
              <div>
                <span>{{currentScheme.targetName}}</span>
              </div>
            </cell>
            <cell title="方案编号">
              <i slot="icon" class="iconfont icon-dynamic_fill" style="color:#4A90E2;padding-right: 5px;"></i>
              <div>
                <span>{{currentScheme.planId}}</span>
              </div>
            </cell>
            <cell title="职业类别">
              <i slot="icon" class="iconfont icon-qrcode_fill" style="color:#4A90E2;padding-right: 5px;"></i>
              <div>
                <span>{{currentScheme.occupationType}}类</span>
              </div>
            </cell>
            <cell title="人数">
              <i slot="icon" class="iconfont icon-group_fill" style="color:#ff9900;padding-right: 5px;"></i>
              <div>
                <span>{{currentScheme.peoples}}人</span>
              </div>
            </cell>
            <cell title="平均年龄">
              <i slot="icon" class="iconfont icon-like_fill" style="color:#4A90E2;padding-right: 5px;"></i>
              <div>
                <span>{{currentScheme.avgAges}}岁</span>
              </div>
            </cell>
            <cell title="保险期间">
              <i slot="icon" class="iconfont icon-chengshifuwu" style="color:#4A90E2;padding-right: 5px;"></i>
              <div>
                <span>{{currentScheme.insuredYear}}{{filter(currentScheme)}}</span>
              </div>
            </cell>
            <cell
              title="责任信息"
              is-link
              @click.native="openInsurance">
              <i slot="icon" class="iconfont icon-suishendai" style="color:#ff9900;padding-right: 5px;"></i>
              <span slot="default"><badge :text="duties.length"></badge></span>
            </cell>
          </group>
        </div>
      </div>
      <div>
        <x-dialog :show.sync="showModal" class="dialog-demo">
          <div class="img-box">
            <swiper height="350px" dots-position="center">
              <swiper-item class="black" v-for="(item,index) in duties" :key="index">
                <p style="background-color: #ffe26d;padding: 8px;">
                  {{item.dutyname}}({{index + 1}}/{{duties.length}})</p>
                <group class="swiperGroup" v-if="item.amnt">
                  <cell title="保险金额（元）">
                    <countup :end-val="Number(item.amnt)" :duration="3" :decimals="0"></countup>
                  </cell>
                </group>
                <group class="swiperGroup" v-if="item.disableflag">
                  <cell title="评定标准">{{standard[item.disableflag - 1]}}</cell>
                </group>
                <group class="swiperGroup" v-if="item.hbRate">
                  <cell title="行标赔付比例">{{item.hbRate}}</cell>
                </group>
                <group class="swiperGroup" v-if="item.gbRate">
                  <cell title="工标赔付比例">{{item.gbRate}}</cell>
                </group>
                <group class="swiperGroup" v-if="item.deductible">
                  <cell title="免赔额（元）">{{item.deductible}}</cell>
                </group>
                <group class="swiperGroup" v-if="item.rate*100 !== 0">
                  <cell title="赔付比例（%）">{{item.rate * 100}}</cell>
                </group>
                <group class="swiperGroup" v-if="item.deductibleDats">
                  <cell title="免赔天数">{{item.deductibleDats}}</cell>
                </group>
                <group class="swiperGroup" v-if="item.maincorpprem">
                  <cell title="当前保费（元/人）">{{item.maincorpprem}}</cell>
                </group>
              </swiper-item>
            </swiper>
          </div>
          <div @click="showModal = false" style="background-color: #ececec">
            <span class="vux-close">
              <i class="iconfont icon-close" style="color:#EA5A49;font-size: 24px"></i>
            </span>
          </div>
        </x-dialog>
      </div>
    </view-box>
  </div>
</template>
<script>
  import {
    XHeader,
    Group,
    Cell,
    ButtonTab,
    ButtonTabItem,
    XDialog,
    TransferDomDirective as TransferDom,
    Swiper,
    Divider,
    SwiperItem,
    Badge,
    Countup,
    ViewBox
  } from 'Vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XHeader,
      Group,
      Cell,
      Divider,
      ButtonTab,
      ButtonTabItem,
      XDialog,
      Swiper,
      SwiperItem,
      Badge,
      Countup,
      ViewBox
    },
    data(){
      return {
        currentData: {},
        promotionIndex: 0,
        showModal: false,
        standard: ["行业标准", "工伤标准", "工伤按工伤、非工伤按行标"]
      }
    },
    computed: {
      ownShare(){
        if (this.currentData.ownShare) {
          return this.currentData.ownShare * 100 + "%"
        } else {
          return "暂无"
        }
      },
      duties(){
        if (this.currentData.insuredPlan) {
          return this.currentData.insuredPlan[this.promotionIndex].ecinquiryDutyDTOList
        } else {
          return
        }
      },
      currentScheme(){
        if (this.currentData.insuredPlan) {
          return this.currentData.insuredPlan[this.promotionIndex]
        } else {
          return
        }
      },
      insuredPlan(){
        if (this.currentData.insuredPlan) {
          let schemes = [];
          let text = ['一', '二', '三', '四', '五', '六', '七'];
          for (let i = 0; i < this.currentData.insuredPlan.length; i++) {
            schemes.push('保险方案' + text[i])
          }
          return schemes
        } else {
          return []
        }
      },
      shortRate(){
        if (this.currentScheme) {
          return this.currentScheme.shortRate * 100 + "%"
        } else {
          return "暂无"
        }
      }
    },
    methods: {
      filter(row){
        let text = null;
        if (row.insuredYearFlag === "Y") {
          text = "年"
        } else if (row.insuredYearFlag === "M") {
          text = "个月"
        } else {
          text = "天"
        }
        return text
      },
      getIndex(index){
        console.log(index);
        this.promotionIndex = index;
        console.log(this)
      },
      openInsurance(){
        this.showModal = true
      },
      goBack(){
        this.$router.push({
          path: '/listDetail'
        });
        this.$store.commit('CHANGE_TRANSITION', 'right')
      }
    },
    mounted(){
      this.currentData = this.$route.query.info;
    }
  }
</script>
